<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>

    <script type="text/javascript">
      // Promise :是ES6出现的一个内置的类；解决异步问题；
      // FormData

      function move(ele, target, dir, cb) {
        let timer = setInterval(() => {
          let LeftNum = parseInt(getComputedStyle(ele, null)[dir]);

          let speed = 10 * (target > LeftNum ? 1 : -1);
          if (LeftNum == target) {
            clearInterval(timer);
            cb && cb();
          } else {
            ele.style[dir] = LeftNum + speed + "px";
          }
        }, 100);
      }

      let boxEle = document.querySelector(".box");
      // 回调地狱 ：回调函数出现层层嵌套关系；
      // 维护困难；
      move(boxEle, 300, "left", function () {
        console.log("运动结束");

        move(boxEle, 300, "top", function () {
          move(boxEle, 0, "left", function () {
            console.log(1111);
            move(boxEle, 0, "top", function () {
              console.log("运动结束");
            });
          });
        });
      });

      // Promise 会把 异步的依次执行 改成  链式调用 避免回调地狱问题；
    </script>
  </body>
</html>
